<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />-->
<meta charset = "UTF-8">
<title>HTML5中国象棋游戏  强化学习版</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@torch/torchjs@latest/dist/torch.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/webgpu-torch@latest/torch.js"></script> -->
<script src="js/rl.js"></script>
<script src="js/tf.js"></script>
<script src="js/chessNet.js"></script>

<link href="css/zzsc.css" type="text/css" rel="stylesheet" />
<style>
  /* Tab styling */
  .tabs {
    display: flex;
    margin-bottom: 20px;
  }

  .tab-button {
    padding: 10px 20px;
    cursor: pointer;
    background-color: #ddd;
    border: none;
    outline: none;
    border-radius: 5px 5px 0 0;
  }

  .tab-button.active {
    background-color: #fff;
    font-weight: bold;
  }

  .tab-content {
    display: none;
  }

  .tab-content.active {
    display: block;
  }

</style>
</head>
<body>
<div class="box" id="box">
  <div class="main-container">
    <div class="chess_left">
        <canvas id="chess">对不起，您的浏览器不支持HTML5，请升级浏览器至IE9、firefox或者谷歌浏览器！</canvas>
        <audio src="audio/click.wav" id="clickAudio" preload="auto"></audio>
        <!--<audio src="audio/check.wav" id="checkAudio" preload="auto"></audio>-->
        <audio src="audio/select.wav" id="selectAudio" preload="auto"></audio>
        <link rel="stylesheet" type="text/css" href="https://www.bootcss.com/p/buttons/css/buttons.css">
        <!-- <div>
            <div class="bn_box" id="bnBox">
                <input type="button" name="offensivePlay" id="tyroPlay" class="button button-caution button-pill button-jumbo" value="新手水平" />
                <input type="button" name="offensivePlay" id="superPlay" class="button button-caution button-pill button-jumbo" value="中级水平" />
                <input type="button" name="button" id="" value="大师水平" class="button button-caution button-pill button-jumbo" disabled /><br>
                <input type="button" name="regret" id="regretBn" class="button button-raised button-pill button-inverse" value="悔棋" />
                <input type="button" name="billBn" id="billBn" value="重新开始" class="button button-glow button-rounded button-royal" class="bn_box" />
                <input type="button" name="stypeBn" id="stypeBn" class="button button-raised button-primary button-pill" value="放大棋局" />
            </div>
        </div> -->
    </div>
    <div class="chess_right" id="chessRight">
        <select name="billList" id="billList">
        </select>
        <ol id="billBox" class="bill_box">
        </ol>
    </div>
  </div>
  <!-- 删除:<div id="moveInfo" class="move_info"> </div> -->

   <!-- 新增 Play 和 Analysis 部分 -->
  <div class="play_analysis">
      <!-- Tab buttons -->
      <div class="tabs">
          <button class="tab-button active" data-tab="play">Play</button>
          <button class="tab-button" data-tab="analysis">Analysis</button>
      </div>

      <!-- Play Tab Content -->
      <div id="play" class="tab-content active">
          <!-- Moved game buttons here -->
        <div>
            <div class="bn_box" id="bnBox">
                <input type="button" name="offensivePlay" id="tyroPlay" class="button button-caution button-pill button-jumbo" value="新手水平" />
                <input type="button" name="offensivePlay" id="superPlay" class="button button-caution button-pill button-jumbo" value="中级水平" />
                <input type="button" name="button" id="" value="大师水平" class="button button-caution button-pill button-jumbo" disabled /><br>
                <!--
            <input type="button" name="offensivePlay" id="offensivePlay" value="先手开始" />
            <input type="button" name="defensivePlay" id="defensivePlay" value="后手开始" />
            -->
                <input type="button" name="regret" id="regretBn" class="button button-raised button-pill button-inverse" value="悔棋" />
                <input type="button" name="billBn" id="billBn" value="重新开始" class="button button-glow button-rounded button-royal" class="bn_box" />
                <input type="button" name="stypeBn" id="stypeBn" class="button button-raised button-primary button-pill" value="放大棋局" />
            </div>
        </div>
          
          <div class="human_ai">
              <div class="human">
                  <span>Human</span>
                  <input type="text" placeholder="Teaching Game" />
              </div>
              <div class="ai">
                  <span>AI</span>
                  <input type="text" placeholder="Simple Style (2d)" />
              </div>
          </div>
      </div>

      <!-- Analysis Tab Content -->
      <div id="analysis" class="tab-content">
          <div id="moveInfo" class="move_info"> </div>
          <div class="score_win_rate">
              <div class="score">
                  <span>Score</span>
                  <input type="text" placeholder="Win Rate" />
              </div>
              <div class="win_rate">
                  <span>Win Rate</span>
                  <input type="text" placeholder="70%" />
              </div>
          </div>
          <div class="chart">
              <canvas id="chartCanvas"></canvas>
          </div>
          <div class="info_details_notes">
              <div class="info">
                  <span>Info</span>
                  <textarea>Performing additional analysis to 9122 visits</textarea>
              </div>
              <div class="details">
                  <span>Details</span>
                  <textarea>Move 32: W S14 Move was predicted best move PV: WS14 P13 O14 N15 O13 N17 M16 M15 N18 M17 L16 O12 N13 M18 L15 M14 Q18 Move was #1 according to policy (69.86%).</textarea>
              </div>
              <div class="notes">
                  <span>Notes</span>
                  <textarea>Your SGF notes for this position here.</textarea>
              </div>
          </div>
      </div>
  </div>
</div>
<script src="js/common.js"></script> 
<script src="js/play.js"></script> 
<script src="js/AI.js"></script> 
<script src="js/bill.js"></script> 
<script src="js/gambit.js"></script>

<script type="text/javascript">
  console.log(1+2);
  rl.init()
  
  // Tab switching functionality
  document.querySelectorAll('.tab-button').forEach(button => {
      button.addEventListener('click', () => {
          const tabId = button.getAttribute('data-tab');
          
          // Remove active class from all buttons and contents
          document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
          document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
          
          // Add active class to current button and content
          button.classList.add('active');
          document.getElementById(tabId).classList.add('active');
      });
  });
</script>
</body>
</html>



